<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品ID" prop="id">
        <el-input v-model="queryParams.id" placeholder="请输入商品ID" clearable/>
      </el-form-item>
      <!--      <el-form-item label="采集状态" prop="status">-->
      <!--        <el-select v-model="queryParams.status" clearable placeholder="请选择采集状态">-->
      <!--          <el-option v-for="item in options" :key="item.value" :label="item.label"-->
      <!--                     :value="item.value"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="collectionList" border stripe :cell-style="{'text-align':'center'}"
              :header-cell-style="{'text-align':'center'}">
      <el-table-column label="商品ID" align="center" prop="id" width="200"/>
      <el-table-column label="采集链接" prop="collectUrl"/>
      <el-table-column label="商品价格" prop="collectProductPrice" width="80"/>
      <el-table-column label="标题" prop="subject"/>
      <el-table-column label="是否已处理" prop="categoryName" width="120">
        <template slot-scope="scope">

        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="openImageFilter(scope.row)">图片过滤</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getCollectionList"/>
    <!--  过滤图片弹窗  -->
    <el-dialog title="筛选图片" :visible.sync="isOpenImageFilter" width="90%">
      <div class="flex-between">
        <!--        <div class="changePageStyle">-->
        <el-button icon="el-icon-d-arrow-left" circle class="fontSize26 mr10" type="info" plain
                   @click="getCollectProdImg('-1')"></el-button>
        <!--        </div>-->
        <div>
          <div>
            <div>
              <div class="text-center fontSize16 fontSizeB text-danger">轮播图</div>
              <div class="flexBox">
                <image-upload ref="uploadImage" key="file-upload-image" v-model="imageURLs" :isShowTip="false"
                              :limit="2"
                              :isShowCreateImg="true" :atlasType="0" :is-show-size="true" @deleteImg="deleteImg"
                              @getChooseCreateImg="getChooseCreateImg"/>
                <div v-if="white">
                  <image-upload v-model="white" :isShowTip="false" :limit="1" isShowSize/>
                  <div class="text-center fontSize16 fontSizeB text-danger pt5 mt10">白底图</div>
                </div>
              </div>

            </div>
            <el-form label-width="100px">
              <el-form-item label="商品标题" prop="subject">
                <el-input v-model="titleText" placeholder="请输入商品标题" show-word-limit clearable/>
              </el-form-item>
              <el-form-item label="商品详情" prop="detail">
                <el-input v-model="detailText" type="textarea" :autosize="{ minRows: 2, maxRows: 12}"
                          placeholder="请输入商品详情" clearable/>
              </el-form-item>
            </el-form>
          </div>
          <div>
            <div class="text-center fontSize16 fontSizeB text-danger">详情图</div>
            <image-upload ref="uploadImage" key="file-upload-image" v-model="detailImg"
                          :isShowTip="false" :limit="2" :atlasType="1" @deleteImg="deleteImg"/>
          </div>
          <div v-if="skuImgList && skuImgList.length>0">
            <div class="text-center fontSize16 fontSizeB text-danger">SKU图片</div>
            <image-upload ref="uploadImage" key="file-upload-image" v-model="skuImgList" :isShowTip="false" :limit="2"
                          @deleteImg="deleteImg"/>
          </div>
        </div>
        <el-button icon="el-icon-d-arrow-right" circle class="fontSize26 ml10" type="info" plain
                   @click="getCollectProdImg('1')"></el-button>
      </div>
      <!--      <div style="display: flex" class="mt20">-->
      <!--        <div style="display: flex;flex-direction: column;" class="mr20">-->
      <!--          <el-button class="mb10" size="small" type="success" @click="handleChooseImg('1')">生成白底图</el-button>-->
      <!--      <image-upload v-if="white" v-model="white" :isShowTip="false" atlasType="3" :limit="1"-->
      <!--                    isShowSize/>-->
      <!--        </div>-->
      <!--        <div style="display: flex;flex-direction: column;">-->
      <!--          <el-button class="mb10" size="small" type="success" @click="handleChooseImg('0')">生成营销图</el-button>-->
      <!--          <image-upload v-if="marketing" v-model="marketing" :isShowTip="false" atlasType="2" :limit="1"-->
      <!--                        isShowSize/>-->
      <!--        </div>-->
      <!--      </div>-->
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="deleteProduct">删除该商品</el-button>
        <el-button :loading="saveLoading" type="primary" @click="saveImage">保存</el-button>
        <el-button @click="closeModal">取 消</el-button>
      </div>
      <div slot="title" class="dialog-footer">
        <el-button type="danger" @click="deleteProduct">删除该商品</el-button>
        <el-button @click="closeModal">取 消</el-button>
        <el-button :loading="saveLoading" type="primary" @click="saveImage">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  changeCollectProdImg,
  deleteCollectProd,
  queryCollectList,
  saveCollectProdImg, generateMarketing, generateWhite, queryCollectProdImg
} from "@/api/gather/aliCollectionProduct"

export default {
  name: "aliCoolectionList",
  data() {
    return {
      loading: true,
      collectionList: [],//采集商品列表
      isOpenImageFilter: false,//是否打开图片过滤弹窗
      collectionId: "",//采集商品Id
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      imageURLs: [],//轮播图
      detailImg: [],//详情图
      skuImgList: [],//sku图片
      white: "",//白底图
      marketing: "",//营销图
      chooseImgUrl: "",//选择的图片
      saveLoading: false,//保存图片loading
      detailText: '',//详情文字
      titleText: "",//标题文字
      // 显示搜索条件
      showSearch: true,
    }
  },
  created() {
    this.getCollectionList()
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getCollectionList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    getCollectionList() {
      queryCollectList(this.queryParams).then(response => {
        this.collectionList = response.rows;
        this.total = response.total;
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换商品图片
    getCollectProdImg(type) {
      let data = {
        type: type,
        id: this.collectionId
      }
      changeCollectProdImg(data).then((res) => {
        this.collectionId = res.id
        this.getAllImage(res)
      })
    },
    // 删除商品
    deleteProduct() {
      this.$confirm("是否确定删除该商品？", "提示").then(() => {
        deleteCollectProd({id: this.collectionId}).then((res) => {
          this.getCollectProdImg('1')//删除图片后自动切换下一个商品
          this.$message.success(res.msg)
        })
      })
    },
    // 获取选择的图片
    getChooseCreateImg(url) {
      console.log('url', url)
      this.white = url
    },
    // 删除图片
    deleteImg(url, fileList, atlasType) {
      let urlList = [];
      urlList = fileList.map(item => item.url)
      // console.log('urlList', urlList.join(';'))
      if (atlasType == '0') {
        this.imageURLs = urlList
      } else if (atlasType == '1') {
        this.detailImg = urlList
      } else {
        this.skuImgList = urlList
      }
    },
    // 保存图片
    saveImage() {
      // this.$confirm("是否确定保存图片？", '提示').then(() => {
      this.saveLoading = true
      let skuImgMap = {};
      this.skuImgList.map(item => {
        skuImgMap[item.name] = item.url
      })
      let data = {
        skuImgMap: skuImgMap,
        white: this.white,
        // marketing: this.marketing,
        detailImg: this.detailImg.join(';'),
        main: this.imageURLs.join(';'),
        id: this.collectionId,
        detail: this.detailText,
        subject: this.titleText
      }
      saveCollectProdImg(data).then((res) => {
        this.getCollectProdImg('1')//保存图片后自动切换下一个商品
        this.saveLoading = false
        this.$message.success(res.msg)
      })
      // })
    },
    // 打开过滤图片弹窗
    openImageFilter(row) {
      this.collectionId = row.id
      queryCollectProdImg({id: this.collectionId}).then((res) => {
        this.getAllImage(res)
        this.isOpenImageFilter = true
      })
    },
    // 公共方法操作图片回显
    getAllImage(res) {
      this.imageURLs = res.main.split(';')
      this.detailImg = res.detailImg.split(';')
      this.marketing = res.marketing
      this.white = res.white
      this.skuImgList = []
      this.detailText = res.detail
      this.titleText = res.subject
      let skuImgMap = res.skuImgMap;
      for (let key in skuImgMap) {
        this.skuImgList.push({
          name: key,
          url: skuImgMap[key]
        })
      }
    },
    // 选择图片生成白底或营销图
    handleChooseImg(type) {
      let message = type == '1' ? '白底图' : '营销图'
      this.$confirm('是否确定选择此图片作为' + message + '？').then(() => {
        let imgUrl = this.chooseImgUrl
        this.$modal.loading('正在生成' + message + '，请稍候...');
        let data = {
          imgUrl: imgUrl.indexOf('http') != -1 ? imgUrl : this.$store.getters.domain + imgUrl
        }
        console.log('data', data.imgUrl)
        if (type == '1') { //生成白底图
          generateWhite(data).then(res => {
            this.$message.success(res.msg)
            this.white = res.data
          }).finally(() => {
            this.$modal.closeLoading();
          })
        } else { //生成营销图
          generateMarketing(data).then(res => {
            this.$message.success(res.msg)
            this.marketing = res.data
          }).finally(() => {
            this.$modal.closeLoading();
          })
        }
      })
    },
    // 关闭弹窗
    closeModal() {
      this.isOpenImageFilter = false
      this.getCollectionList()
    }
  }
}
</script>

<style scoped>
.changePageStyle {
  /*height: 100%;*/
  /*position: absolute;*/
  /*top: 40%;*/
  /*left: 20px;*/
  /*z-index: 99;*/
}
</style>
